<template>
    <div class="talk">
        <button @click="getLoveTalk">获取一句土味情话</button>
        <ul>
            <li v-for="item in talklist" :key="item.id">{{ item.title }}</li>
        </ul>
    </div>
</template>


<script setup lang="ts" name="Page45">
import { onMounted, reactive,ref } from 'vue';
import axios from 'axios';
import { nanoid } from 'nanoid'
let talklist = ref([
    { id: "10001", title: "土味1" }   
])
const getLoveTalk = async () => {
    let res = await axios.get('https://api.uomg.com/api/rand.qinghua?format?json')
    console.log(res.data.content)
    let obj = { id: nanoid(), title: res?.data?.content ? res?.data?.content : '空~~' }
    talklist.value.unshift(obj)
}
onMounted(()=>{
    // console.log('888')
    talklist.value=[]
})

</script>


<style scoped>
.talk {
    background-color: skyblue;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
}

select,
button {
    margin: 0 5px;
    height: 40ppx;
    line-height: 18px;
}
ul{
    text-align: left;
    list-style: none;
}
</style>